/**
 * @page: 快递账单
 * @author:Elvis
 */

import { useState, useEffect, useMemo } from 'react';
import TableContent from './ExpressBillList/index.jsx';
import FormRender from '@/components/FormRender';
import { useResize } from '@/hooks/useResize';
import { getFormItem } from './config.js';
import {  getWithdrawDetailData, getIndexExpressList, getIndexShopList } from './service';
import { Tooltip } from "antd";
import { handleRenderExpressTag } from '@/utils/utils.jsx';
import moment from 'moment';

const dateFormat = 'YYYY-MM-DD HH:mm:ss';

const AccountDetail = () => {

  const [data, setData] = useState([]) // 列表数据

  const [shopList, setShopList] = useState([])

  const [expressIndexList, setExpressIndexList] = useState([])

  const [query, setQuery] = useState({
    orderType: '1',
    time: [moment().startOf('month'), moment().endOf('month')],
  }); //查询条件

  const [pages, setPages] = useState({
    current: 1,
    total: 0,
    pageSize: 10,
  })

  //监听变更
  const { el: headerEl, height: headerHeight } = useResize();

  //表单数据
  const formArr = useMemo(() => {
    return getFormItem({
      logisticsId: expressIndexList,
      ecStoreId: shopList
    });
  }, [expressIndexList, shopList])

  useEffect(() => {
    queryAccountDetailData();
  }, [query, pages.pageSize, pages.current])

  useEffect(() => {
    getExpressList();
    getShopList();
  }, [])

  const getExpressList = async () => {
    const { data, success} = await getIndexExpressList();
    if (success) {
      const arr = data.map(v => {
        return {
          label: <Tooltip title={v.name}>{handleRenderExpressTag(v.flag, v.name)}</Tooltip>,
          value: v.id
        }
      })
      setExpressIndexList(arr);
    }
  }

  const getShopList = async () => {
    const { success, data = {} } = await getIndexShopList();
    if (success) {
      const { records = [] } = data;
      const arr = records.map(v => {
        return {
          label: v.systemStoreName || v.storeName,
          value: v.id
        }
      })
      setShopList(arr);
    }
  }

  const queryAccountDetailData = async () => {
    START_LOADING()
    const params = {
      ...query,
      current: pages.current,
      size: pages.pageSize
    }
    if (params.time) {// 发货时间
      params.startTime = query.time[0].format(dateFormat);
      params.endTime = query.time[1].format(dateFormat);
    }
    params.time = undefined;
    const { success, data } = await getWithdrawDetailData(params);
    if (success) {
      setPages({
        ...pages,
        total: data.total
      });
      setData(data.records);
    }
    END_LOADING()
  }

  //表单渲染组件
  const FormRenderProps = {
    query,
    formArr,
    formConfig: {
      name: 'express-bill-form',
      style: { marginBottom: '16px' }
    },
    clickSearch(val) {
      setPages({
        ...pages,
        current: 1
      });
      setQuery(val);
    },
    clickReset() {
      setPages({
        ...pages,
        current: 1
      });
      setQuery({ 
        orderType: '1',
        time: [moment().startOf('month'), moment().endOf('month')] 
      });
    },
  }

  const TableContentProps = {
    data,
    query,
    pages,
    setPages,
    headerHeight,
    handleOk() {
      queryAccountDetailData();
    },
  }

  

  return (
    <>
      <div ref={headerEl}>
        <FormRender {...FormRenderProps} />
      </div>
      <TableContent {...TableContentProps} />
    </>
  )
}

export default AccountDetail;
